<template>
  <div class="contain">
    <div class="column-left">
      <div class="column-left-left" id="bar">
      </div>
      <div class="column-left-right">
          <el-table
        :data="list"
        style="width: 100%; margin-top: 50px;">
          <el-table-column
            prop="id"
            label="课程号"
            width="80">
          </el-table-column>
          <el-table-column
            prop="time"
            label="观看时长"
            width="80">
          </el-table-column>
      </el-table>
      </div>
    </div>
    <div class="foot-left">数据分析</div>
    <div class="column-right">
      <div class="column-right-left" id="rader"></div>
      <div class="column-right-right">
        <el-table
        :data="courseid_score"
        style="width: 100%; margin-top: 50px;">
          <el-table-column
            prop="id"
            label="课程号"
            width="80">
          </el-table-column>
          <el-table-column
            prop="score"
            label="成绩"
            width="80">
          </el-table-column>
      </el-table>
      </div>
    </div>
    <div class="foot-right">数据分析</div>
  </div>
</template>

<script>
// 按需引入包
import axios from 'axios'
import * as echarts from 'echarts/core'
import {
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  DataZoomComponent
} from 'echarts/components'
import { BarChart, LineChart, RadarChart } from 'echarts/charts'
import { UniversalTransition } from 'echarts/features'
import { CanvasRenderer } from 'echarts/renderers'

echarts.use([
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  DataZoomComponent,
  BarChart,
  LineChart,
  CanvasRenderer,
  UniversalTransition,
  RadarChart
])

export default {
  data () {
    return {
      courseid_score: null,
      courseid_max: null,
      scorelist: null,
      list_x: null,
      list_y: null,
      list: null
    }
  },
  methods: {
    getPicture () {
      const chartDom = document.getElementById('bar')
      const myChart = echarts.init(chartDom)

      const option = {
        title: {
          text: '各课程观看时长'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#283b56'
            }
          }
        },
        legend: {},
        toolbox: {
          show: true,
          feature: {
            dataView: { readOnly: false },
            restore: {},
            saveAsImage: {}
          }
        },
        dataZoom: {
          show: false,
          start: 0,
          end: 100
        },
        xAxis: {
          type: 'category',
          data: this.list_x
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: this.list_y,
            type: 'bar'
          }
        ]
      }
      myChart.setOption(option)
    },
    getRader () {
      const chartDom = document.getElementById('rader')
      const myChart = echarts.init(chartDom)
      const option = {
        title: {
          text: '成绩雷达图'
        },
        toolbox: {
          show: true,
          feature: {
            restore: {},
            saveAsImage: {}
          }
        },
        dataZoom: {
          show: false,
          start: 0,
          end: 100
        },
        legend: {
          data: ['学生成绩']
        },
        radar: {
          // shape: 'circle',
          indicator: this.courseid_max
        },
        series: [
          {
            name: 'Budget vs spending',
            type: 'radar',
            data: [
              {
                value: this.scorelist,
                name: '学生成绩'
              }
            ]
          }
        ]
      }
      option && myChart.setOption(option)
    },
    getGrade () {
      const id = this.$route.query.id
      axios.get('http://127.0.0.1:8000/api/classMangement_system/score_grade/', {
        params: {
          id: id
        }
      }).then(res => {
        const list = res.data.msg.data
        this.courseid_max = []
        this.scorelist = []
        this.courseid_score = []
        for (let i = 0; i < list.length; i++) {
          const id = list[i].courseId
          this.courseid_max.push({
            name: id,
            max: 100
          })
          this.scorelist.push(list[i].score)
          const score = list[i].score
          this.courseid_score.push({
            id: id,
            score: score
          })
        }
        this.getRader()
      }).catch(err => {
        console.log(err)
      })
    },
    getData () {
      const id = this.$route.query.id
      axios.get('http://127.0.0.1:8000/api/classMangement_system/watch_time/', {
        params: {
          id: id
        }
      }).then(res => {
        console.log(res.data.msg.data_x, res.data.msg.data_y)
        this.list_x = res.data.msg.data_x
        this.list_y = res.data.msg.data_y
        this.list = []
        // 合并表格数据
        for (let i = 0; i < this.list_x.length; i++) {
          const userId = this.list_x[i]
          const time = this.list_y[i]
          const obj = {
            id: userId,
            time: time
          }
          this.list.push(obj)
          console.log(obj)
        }
        console.log(this.list)
        this.getPicture()
      }).catch(err => {
        console.log(err)
      })
    }
  },
  mounted () {
    this.getData()
    this.getGrade()
  }
}
</script>

<style>
  .contain{
    width:100%;
    height: 650px;
    margin: 0;
    padding: 0;
    display: flex;
  }
  .column-left {
    flex: 1 /* 列等分空间 */;
    display: flex;
  }
  .column-left-left {
    flex: 3.5; /* 列分空间 */
    height: 60%;
  }
  .column-left-right {
    flex: 1; /* 列分空间 */
    height: 60%;
  }
  .column-right {
    flex: 1; /* 列等分空间 */
    display: flex;
  }
  .column-right-left {
    flex: 3.5; /* 列分空间 */
    height: 60%;
  }
  .column-right-right {
    flex: 1; /* 列分空间 */
    height: 60%;
  }
  .foot-left{
    position: fixed;
    left: 250px;
    bottom: 30px; /* 盒子底部与窗口底部对齐 */
    width: 630px;
    height: 250px;
  }
  .foot-right{
    position: fixed;
    right: 0px;
    bottom: 30px; /* 盒子底部与窗口底部对齐 */
    width: 630px;
    height: 250px;
  }
  .text {
    font-size: 14px;
  }
  .item {
    margin-bottom: 18px;
  }
</style>
